<template>
  <div class="box">
    <h3>班级列表</h3>
    <!--为echarts准备一个具备大小的容器dom-->
    <div id="main" style="width: 800px; height: 400px"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      charts: "",
      opinion: [],
      opinionData: [],
    };
  },
  methods: {
    drawPie(id) {
      this.charts = echarts.init(document.getElementById(id));
      this.charts.setOption({
        tooltip: {
          trigger: "item",
          formatter: "{a}：{b}<br/>班级人数：{c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          x: "left",
          data: this.opinion,
        },
        series: [
          {
            name: "班级名称",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: "center",
              },
              emphasis: {
                show: true,
                fontSize: '27',
                fontWeight: 'bold'

              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: this.opinionData,
          },
        ],
      });
    },
    getClasses() {
      this.$api.classApi.getClass().then(({ data }) => {
        let arr = data.data.rows
        arr.forEach(v => {
          this.opinion.push(v.name)
          this.opinionData.push({ value: v.students.length, name: v.name })
        });
        this.drawPie("main");
      })

    }
  },
  created() {
    this.getClasses()
  }
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
.box {
  background-color: #fff;
  padding: 10px;
  width: 570px;
  /* height: 400px; */
}
</style>